import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import {
  Table,
  Form,
  Select,
  DatePicker,
  Input,
  Card,
  Tag,
  Button,
  Row,
  Col,
  Badge,
} from 'antd';

import PageHeaderLayout from '../../../layouts/PageHeaderLayout';

const FormItem = Form.Item;
const Option = Select.Option;
const creditStateArray = ['未查询', '已查询', '查询中'];
const videoSignStateArray = ['未面签', '已面签'];
const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};

@connect(({ risk, apply, home }) => ({
  risk,
  apply,
  home,
}))
@Form.create()
export default class RiskRateList extends PureComponent {
  state = {
    createTimeStart: '', 
    createTimeEnd: '',
  };

  componentDidMount() {
    const { dispatch } = this.props;
    // dispatch({
    //   type: 'home/fetch',
    // });
    dispatch({ type: 'apply/getProductList' });
    dispatch({
      type: 'apply/fetchApply',
      payload: {
        offset: 0,
        limit: 10,
      },
    });
  }

  tableColumns = [
    { title: '业务编号', dataIndex: 'bizNum', key: 'bizNum' },
    { title: '客户姓名', dataIndex: 'custName', key: 'custName' },
    { title: '产品名称', dataIndex: 'productName', key: 'productName' },
    { title: '面签状态', dataIndex: 'videoSignState', key: 'videoSignState',
    render(val) {
      switch (val) {
        case 0:
          return <Tag color="red">{videoSignStateArray[val]}</Tag>;
        case 1:
          return <Tag color="green">{videoSignStateArray[val]}</Tag>;
      }
    }, },
    {
      title: '征信筛查',
      dataIndex: 'creditState',
      key: 'creditState',
      align: 'center',
      render(val) {
        switch (val) {
          case 0:
            return <Tag color="red">{creditStateArray[val]}</Tag>;
          case 1:
            return <Tag color="green">{creditStateArray[val]}</Tag>;
          case 2:
            return <Tag color="orange">{creditStateArray[val]}</Tag>;
        }
      },
    },
    { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
    {
      title: '操作',
      render: (text, reacd) => (
        <Fragment>
          <Link to={`/risk/riskRateDetails1?id=${reacd.id}&taskId=${reacd.taskId}&applyDisabled=${1}`}>
            评级
          </Link>
        </Fragment>
      ),
    },
  ];

  handleSearch = () => {
    const { dispatch } = this.props;
    const { validateFieldsAndScroll } = this.props.form;
    validateFieldsAndScroll((error, values) => {
      if (!error) {
        dispatch({
          type: 'apply/fetchApply',
          payload: {
            ...values,
            createTimeBegin: this.state.createTimeStart,
            createTimeEnd: this.state.createTimeEnd,
            offset: 0,
            limit: 10,
          },
        });
      }
    });
  };

  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    dispatch({
      type: 'apply/fetchApply',
      payload: {
        offset: 0,
        limit: 10,
      },
    });
  };

  handleCreateTimeChange = (dates, dateString) => {
    this.setState({
      createTimeStart: dateString[0],
      createTimeEnd: dateString[1],
    });
  };

  handleStandardTableChange = e => {
    // console.log('handleStandardTableChange', e);
    // console.log('offset', (e.current - 1) * e.pageSize);
    // console.log('limit', e.pageSize);
    const { dispatch } = this.props;
    const { validateFieldsAndScroll } = this.props.form;
    validateFieldsAndScroll((error, values) => {
      if (!error) {
        dispatch({
          type: 'apply/fetchApply',
          payload: {
            ...values,
            createTimeBegin: this.state.createTimeStart,
            createTimeEnd: this.state.createTimeEnd,
            offset: (e.current - 1) * e.pageSize,
            limit: e.pageSize,
          },
        });
      }
    });
    // this.props.dispatch({
    //   type: 'apply/fetchApply',
    //   payload: { offset: (e.current - 1) * e.pageSize, limit: e.pageSize },
    // });
  };

  handleApplyCount = (list, code) => {
    for (let i = 0; i < list.length; i++) {
      switch (list[i].code) {
        case code:
          return list[i].active;
      }
    }
  };

  handleRoleListChange = value => {
    // console.log('value', value);
    this.setState({
      productValue: value,
    });
  };

  renderOption = data => {
    const options = [];
    data &&
      data.map(item => {
        options.push(<Option value={item.id} key={item.id}>{item.productName}</Option>);
      });
    return options;
  };

  render() {
    const { apply: { applyList, applyLoading, applyPage, applyProductList } } = this.props;
    // const { home: { list } } = this.props;
    const { getFieldDecorator, getFieldValue, validateFieldsAndScroll } = this.props.form;

    return (
      <PageHeaderLayout title="站长评级">
        {/* {JSON.stringify(list)} */}
        
        <Card style={{ marginTop: '16px' }}>
          <Form onSubmit={this.handleSearch}>
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={8} sm={24}>
                <FormItem label="客户姓名" {...formItemLayout}>
                  {getFieldDecorator('custName', {})(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
              <Col md={8} sm={24}>
                <FormItem label="业务编号" {...formItemLayout}>
                  {getFieldDecorator('bizNum', {})(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
              <Col md={8} sm={24}>
                <FormItem label="产品名称" {...formItemLayout}>
                  {getFieldDecorator('productId', {})(
                    <Select
                      style={{ width: '100%' }}
                      placeholder="请选择"
                      // value={this.state.productValue}
                      onChange={this.handleRoleListChange}
                    >
                      {applyProductList && this.renderOption(applyProductList)}
                    </Select>
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            
              <Col md={8} sm={24}>
                <FormItem label="创建时间" {...formItemLayout}>
                  {getFieldDecorator('createTime', {})(
                    <DatePicker.RangePicker
                      style={{ width: '100%' }}
                      onChange={this.handleCreateTimeChange}
                    />
                  )}
                </FormItem>
              </Col>
              <Col md={8} sm={24} />
              <Col md={8} sm={24}>
                <div style={{ textAlign: 'right' }}>
                  <Button type="primary" htmlType="submit">
                    查询
                  </Button>
                  <Button
                    type="normal"
                    style={{ marginLeft: '16px' }}
                    onClick={this.handleFormReset}
                  >
                    重置
                  </Button>
                </div>
              </Col>
            </Row>
          </Form>
          <Table
            pagination={applyPage}
            dataSource={applyList}
            loading={applyLoading}
            rowKey="id"
            columns={this.tableColumns}
            onChange={this.handleStandardTableChange}
          />
        </Card>
      </PageHeaderLayout>
    );
  }
}
